<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>角色管理</title>
</head>
<body>
	<h2>角色信息管理</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>下面角色信息表格可以进行账户的管理</div>
	</div>
	<div style="margin:10px 0;"></div>
	
	<table id="dg" title="角色信息管理" style="width:auto;height:auto" class="easyui-datagrid" data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10,toolbar:'#toolbar',url:'getAllRolesWithPage',fitColumns:true">
		<thead>
			<tr>
				<th data-options="field:'ck',checkbox:true"></th>
				<th field="roleId" width="5%" align="center">ID</th>
				<th field="roleName"  width="20%" align="center">角色名称</th>
				<th field="roleDesc"  width="10%" align="center">角色描述</th>
			</tr>
		</thead>
	</table>
	<div id="toolbar">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newRole()">创建新角色</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editRole()">编辑</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="removeRole()">删除角色</a>
	</div>  
	<div id="dlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
			closed="true" buttons="#dlg-buttons">
		<div class="ftitle">创建角色</div>
		<form id="fm" method="post" novalidate>
			<table>
				<tr>
					<td><label>角色名称:</label></td>
					<td><input name="roleName" class="easyui-validatebox" required="true"></td>
				</tr>
				<tr>
					<td><label>角色描述:</label></td>
					<td><input name="roleDesc" class="easyui-validatebox" required="true"></td>
				</tr>
			</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveRole()">保存</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
	<script>
	var url;
	function newRole(){
		$('#dlg').dialog('open').dialog('setTitle','创建新角色');
		$('#fm').form('clear');
		url = 'saveRole';
	}
	function editRole(){
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$('#dlg').dialog('open').dialog('setTitle','编辑用户信息');
			$('#fm').form('load',row);
			url = 'updateRole?roleId='+row.roleId;
		}
	}
	function saveRole(){
		$('#fm').form('submit',{
			url: url,
			onSubmit: function(){
				return $(this).form('validate');
			},
			success: function(result){
				$.messager.show({
					title: '提示',
					msg: result
				});
				$('#dlg').dialog('close');		// close the dialog
				$('#dg').datagrid('reload');	// reload the user data
			}
		});
	}
	function removeRole(){
		var row = $('#dg').datagrid('getSelected');
		if (row){
			$.messager.confirm('Confirm','确定删除此角色?',function(r){
				if (r){
					$.post('removeRole',{roleId:row.roleId},function(result){
						$.messager.show({	// show error message
							title: '提示',
							msg: result
						});
						$('#dg').datagrid('reload');

					});
				}
			});
		}
	}
	</script>
</body>
</html>